<template>
    <div class="content">
        <div class="main">
            <div class="main-box" ref="chartRef" id="chartRef"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'eachart_demo',
    props: {
        option: {
            type: Object
        },
        width: String,
        height: String,
    },
    data() {
        return {

        }
    },
    mounted() {
        this.initEachart()
    },
    methods: {
        initEachart() {
            let CirChart = this.$echarts.init(this.$refs.chartRef, "macarons");
            CirChart.setOption(this.option)
            console.log(CirChart)
        }
    }

}
</script>
<style scoped >
.content {
    position: relative;
    box-sizing: border-box;
    background-color: rgba(15,32,95,0.7);
}
.main-box {
    position: absolute;
    height: 128px;
    width: calc(100%-4px);
    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: -2px;
}
.main {
    height: 126px;
    width: 100%;
    border: 1px solid #1723b0;
}
.chart {
    width: 100%;
    height: 100%;
    border-top: 1px solid rgb(209, 206, 206);
}
</style>